<template>
  <div class="dashboard-container">
    <!-- 内容区域 -->
    <el-card>
      <!-- 操作区域  -->
      <div class="action-view mb20">
        <el-button style="margin-right: 10px;" icon="el-icon-plus" type="primary" size="small" @click="dialogVisible = true">增加</el-button>
        <el-popconfirm title="你确定要删除吗?" @confirm="removeCarousels">
          <el-button slot="reference" :disabled="selectionData.length === 0" icon="el-icon-delete" type="danger" size="small">批量删除</el-button>
        </el-popconfirm>
      </div>
      <!-- 表格区域 -->
      <div class="table-view mb20">
        <el-table :data="tableData" @selection-change="selectionChange">
          <!-- 通过指定column的类型 来设置复选框 -->
          <el-table-column type="selection" />
          <el-table-column label="轮播图" prop="carouselUrl">
            <template slot-scope="{ row }">
              <el-image class="carouselCover" :src="row.carouselUrl" :preview-src-list="[row.carouselUrl]" />
            </template>
          </el-table-column>
          <el-table-column label="跳转地址" prop="redirectUrl" />
          <el-table-column label="排序值" prop="carouselRank" />
          <el-table-column label="添加时间" prop="createTime" />
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button style="margin-right: 10px;" type="text" @click="showDialog(row)">修改</el-button>
              <!-- 气泡确认框 -->
              <el-popconfirm title="你确定要删除吗?" @confirm="removeCarousel(row.carouselId)">
                <el-button slot="reference" type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页区域 默认分页10条一页-->
      <div class="page-view fc">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="pagable.total"
          :current-page="pagable.page"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <!-- 添加轮播图 弹窗 -->
    <el-dialog :title="formInput.carouselId ? '修改轮播图' : '添加轮播图'" :visible="dialogVisible" width="40%" :before-close="closeDialog">
      <!-- 表单组件 -->
      <el-form ref="formRef" :model="formInput" :rules="formRules" label-position="right" label-width="100px">
        <!-- 表单项 -->
        <el-form-item label="图片" prop="carouselUrl">
          <!-- action 图片上传地址 show-file-list 是否显示文件列表 on-success 图片上传成功函数  before-upload 图片上传前-->
          <Upload v-model="formInput.carouselUrl" />
        </el-form-item>
        <el-form-item label="跳转链接" prop="redirectUrl">
          <el-input v-model="formInput.redirectUrl" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="排序值" prop="carouselRank">
          <el-input v-model.number="formInput.carouselRank" type="number" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import Upload from '@/components/Upload'

export default {
  name: 'Banner',
  components: { Upload },
  data() {
    return {
      // 表格数据
      tableData: [],
      // 勾选的数据
      selectionData: [],
      // 表格分页
      pagable: {
        page: 1,
        total: 0
      },
      // 表单数据【新增】
      formInput: {},
      // 表单校验规则
      formRules: {
        carouselUrl: { required: true, message: '轮播图不能为空' },
        redirectUrl: { required: true, message: '跳转链接不能为空' },
        carouselRank: { type: 'number', required: true, message: '排序值不符合规则' }
      },
      dialogVisible: false
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    // 获取数据
    async getTableData() {
      const { page } = this.pagable
      // 1. 发起请求  pageNumber 页码  pageSize 每页条数  【axios GET请求参数需要传递给params属性】
      const { data } = await this.$http.get('/carousels', { params: { pageNumber: page, pageSize: 10 }})
      // 2. 将请求结果渲染到页面中
      this.tableData = data.list
      this.pagable.total = data.totalCount
      console.log(data)
    },
    // 页码更改
    pageChange(page) {
      // 更改data中的页码
      this.pagable.page = page
      // 获取数据
      this.getTableData()
    },
    // 显示弹窗
    showDialog(row) {
      this.dialogVisible = true
      // 将row数据拷贝后再赋值 避免修改源数据
      this.formInput = { ...row }
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false
      this.formInput = {}
      // 重置表单
      this.$refs.formRef.resetFields()
    },
    // 提交数据
    async submitForm() {
      try {
        // 获取表单实例 调用验证方法
        await this.$refs.formRef.validate()
        // 验证成功 则发起请求新增轮播图
        if (this.formInput.carouselId) {
          // 修改
          await this.$http.put('/carousels', this.formInput)
          this.$message.success('修改成功')
        } else {
          // 新增
          await this.$http.post('/carousels', this.formInput)
          this.$message.success('新增成功')
        }
        this.closeDialog()
        this.getTableData()
      } catch (error) {
        console.log('验证失败')
      }
    },
    // 轮播图选择
    selectionChange(selection) {
      this.selectionData = selection
    },
    // 删除单个轮播图
    async removeCarousel(id) {
      // delete请求参数写法:  参数在地址栏中 params   参数在body中 data
      await this.$http.delete('/carousels', { data: { ids: [id] }})
      this.$message.success('删除成功')
      this.getTableData()
    },
    // 删除多个轮播图
    async removeCarousels() {
      // 获取当前选中的轮播图 处理结构 =>  [id, id]
      const ids = this.selectionData.map(item => item.carouselId)
      await this.$http.delete('/carousels', { data: { ids }})
      this.$message.success('删除成功')
      this.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.carouselCover {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}
</style>
